<template>
    <div class="wechat-service">
        <div v-if="exclusiveService" class="wechat-service__referrer">
            <img class="wechat-service__avatar" :src="exclusiveService.avatar" alt="">
            <div class="wechat-service__name">{{exclusiveService.name}}</div>
            <div class="wechat-service__mobile">{{exclusiveService.mobile}}</div>
            <div class="wechat-service__btn-wrap" @click="makeCall">
                <span class="wechat-service__icon icon">&#xe725;</span>
                <div class="wechat-service__btn">一键拨打</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';

import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'WechatService',
})
export default class WechatService extends Vue {
    public get exclusiveService() {
        return store.state.user.exclusiveService;
    }

    /**
     * 拨打号码
     */
    public makeCall() {
        wx.makePhoneCall({
            phoneNumber: this.exclusiveService.mobile,
        });
    }

    public async created(query) {
        store.commit('utils/startRequest');
        await store.dispatch('user/getExclusiveService');
        store.commit('utils/endRequest');
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.wechat-service {
    position: relative;
    padding-top: 140px;
    height: 100%;
    text-align: center;
    &__avatar {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    &__name {
        padding-top: 19px;
        font-size: 24px;
        line-height: 34px;
        color: #666;
    }
    &__mobile {
        padding-top: 4px;
        .text-huge();
        color: #666;
    }
    &__btn-wrap {
        display: inline-block;
        padding: 14px 10px 5px;
        margin-top: 10px;
        background-color: #E4C162;
        border-radius: 10px;
        text-align: center;
    }
    &__icon {
        font-size: 34px;
        color: @color-white;
    }
    &__btn {
        margin-top: 4px;
        .text-normal();
        color: @color-white;
    }
}
</style>
